<template>
  <div id="video" class="pa-4 pl-0">
    <!-- <v-container fluid> -->
    <h2>视频管理</h2>
    <Feedback :isSuccess="isSuccess" :isError="isError" :text="text"></Feedback>
    <!-- <v-row> -->
    <v-tabs v-model="tab" id="tab" class="mt-5">
      <v-tab>
        视频
      </v-tab>
      <v-tab>
        直播
      </v-tab>
    </v-tabs>

    <v-tabs-items v-model="tab">
      <v-tab-item>
        <template>
          <v-card flat>
            <v-card-title>
              <v-text-field v-model="search" append-icon="mdi-magnify" label="搜索" single-line
                hide-details></v-text-field>
            </v-card-title>
            <v-data-table no-data-text="暂无上传视频" :headers="headers" :items="videos" :search="search" :loading="loading"
              loading-text="加载中...">
              <template v-slot:items="{ item }">
                <span class="mr-3"><v-icon small class="pr-1">mdi-thumb-up</v-icon>{{ item.goodCount }}</span>
                <!-- <span
                  ><v-icon small class="pr-1">mdi-thumb-down</v-icon
                  >{{ item.dislikes }}</span
                > -->
              </template>
              <template v-slot:top>
                <v-dialog v-model="dialogDelete" persistent max-width="500px">
                  <v-card>
                    <v-card-title>
                      <span class="headline">删除该视频（此操作不可逆) ?</span>
                    </v-card-title>

                    <v-card-text>
                      <v-container>
                        <v-card class="card" tile flat>
                          <v-row no-gutters>
                            <v-col cols="3" sm="2" md="5" lg="5">
                              <v-img class="align-center" :src="itemToDelete.cover">
                              </v-img>
                            </v-col>
                            <v-col>
                              <div class="ml-2">
                                <v-card-title class="pl-2 subtitle-1 font-weight-bold" style="line-height: 1">
                                  {{ itemToDelete.title }}
                                </v-card-title>

                                <v-card-subtitle class="pl-2 pt-2 pb-0" style="line-height: 1">

                                  发布于
                                  {{ dateFormatter(itemToDelete.createTime) }}
                                  <br />
                                  {{ itemToDelete.goodCount }} 点赞
                                </v-card-subtitle>
                              </div>
                            </v-col>
                          </v-row>
                        </v-card>
                      </v-container>
                    </v-card-text>

                    <v-card-actions>
                      <v-spacer></v-spacer>
                      <v-btn color="blue darken-1" text @click="dialogDelete = !dialogDelete">取消</v-btn>
                      <v-btn :loading="deleteBtnLoading" color="blue darken-1" text @click="deleteItem">永久删除</v-btn>
                    </v-card-actions>
                  </v-card>
                </v-dialog>
              </template>
              <template v-slot:item.actions="{ item }">
                <v-btn icon href text class="mr-2" router :to="`/watch/${item.videoId}`">
                  <v-icon>
                    mdi-youtube
                  </v-icon>
                </v-btn>
                <v-btn icon text @click.stop="deleteBtn(item)">
                  <v-icon>
                    mdi-delete
                  </v-icon>
                </v-btn>
              </template>
            </v-data-table>
          </v-card>
        </template>
      </v-tab-item>
      <v-tab-item>
        <template>
          <v-card flat>
            <v-card-title>
              <v-text-field v-model="search" append-icon="mdi-magnify" label="搜索" single-line hide-details>
              </v-text-field>
            </v-card-title>
            <v-data-table no-data-text="暂无直播信息" :headers="liveHeaders" :items="lives" :search="search"
              :loading="loading" loading-text="加载中...">
            </v-data-table>
          </v-card>
        </template>
      </v-tab-item>
    </v-tabs-items>
    <v-pagination v-if="Math.ceil(totalPage / limit) > 1" class="pagination" v-model="curPage"
      :length="Math.ceil(totalPage / limit)" total-visible="5" @input="onPageChange(curPage, limit)"></v-pagination>
    <!-- </v-row> -->
    <!-- </v-container> -->
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import moment from "moment";
import { deleteVideoById, list } from "../../services/VideoRequest";
import { getLiveRecord } from "../../services/LiveRequest";
import Feedback from "../../components/Feedback.vue";
export default {
  data: () => ({
    isSuccess:false,
    isError:false,
    text:'服务器异常',
    closeLiveRoom: null,
    curPage: 1,
    limit: 5,
    totalPage: 0,
    loading: false,
    deleteBtnLoading: false,
    snackbar: false,
    dialogDelete: false,
    tab: null,
    search: "",
    headers: [
      {
        text: "视频",
        align: "start",
        value: "title",
      },
      { text: "状态", value: "status" },
      { text: "点赞数", value: "goodCount" },
      { text: "评论数", value: "commentCount" },
      { text: "操作", value: "actions", sortable: false },
    ],
    liveHeaders: [
      {
        text: "直播介绍",
        align: "start",
        value: "preview",
      },
      { text: "开播时间", value: "createTime" },
      { text: "结束时间", value: "endTime" },
      { text: "总收益", value: "giftTotalValue" },
      { text: "直播类型", value: "tag" },
    ],
    videos: [],
    lives: [],
    itemToDelete: {},
  }),
  computed: {
    ...mapGetters(['currentUser'])
  },  
  components:{
    Feedback
  },
  methods: {
    getMyLiveRoom() {
      getLiveRecord({ pageIndex: this.curPage, pageSize: this.limit })
        .then(res => {
          this.lives = res.data.data.list
        })
    },
    onPageChange(curPage, limit) {
      this.refreshList(curPage, limit);
    },
    refreshList(curPage = 1, limit = 10) {
      this.curPage = curPage
      this.limit = limit
      this.getVideos()
    },
    async getVideos() {
      this.loading = true;

      const videos = await list({ userId: this.currentUser.userId, pageIndex: this.curPage, pageSize: this.limit })
        .catch((err) => {
          console.log(err);
        })
        .finally(() => (this.loading = false));

      if (!videos) return;
      console.log(videos)
      this.totalPage = videos.data.data.total
      this.videos = videos.data.data.list.map((video) => {
        let cache = video
        cache.status = video.status ? '已发布' : '审核中'
        return cache
      });
    },
    deleteBtn(item) {
      this.dialogDelete = true;
      this.itemToDelete = item;
    },
    async deleteItem() {
      this.deleteBtnLoading = true;
      let cache = this.itemToDelete
      cache.status = 0
      deleteVideoById(cache)
        .then(res=>{
          this.text = res.data.message
          if(res.data.code==200){
            this.isSuccess = true
          }else{
            this.isError = true
          }
        })
        .catch((err) => console.log(err))
        .finally(() => {
          this.videos = this.videos.filter(
            (video) => this.itemToDelete.videoId !== video.videoId
          );
          this.deleteBtnLoading = false;
          this.dialogDelete = false;
          this.itemToDelete = {};
          this.snackbar = true;
        });
    },
    dateFormatter(date) {
      return moment(date).locale('zh-cn').fromNow();
    },
  },
  mounted() {
    this.getVideos();
    this.getMyLiveRoom()
  },
  beforeRouteUpdate(to, from, next) {
    this.getVideos();
    next();
  },
};
</script>

<style lang="scss">
// .card,
// #tab .v-tabs-bar {
//   background: #f9f9f9 !important;
// }</style>
